<script setup>
import * as echarts from 'echarts';
import { onMounted ,onBeforeUnmount} from 'vue'

onMounted(() => {
  var chartDom = document.getElementById('payMethodDetails');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {

      trigger: 'item'
    },
    legend: {
      top: '0%',
      left: 'right'
    },
    series: [
      {
        name: '支付方式',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 15,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: '支付宝支付' },
          { value: 735, name: '微信支付' },
          { value: 580, name: '现金支付' },
          { value: 484, name: '银行卡支付' },
          { value: 300, name: '自有支付' }
        ]
      }
    ]
  };

  option && myChart.setOption(option);


})
// onBeforeUnmount(() => {//防止echarts带来的空白bug
//     if (column) {
//         column.dispose()
//         column = undefined
//     }
//     if (line) {
//         line.dispose()
//         line = undefined
//     }
//     if (pie) {
//         pie.dispose()
//         pie = undefined
//     }
//     if (pies) {
//         pies.dispose()
//         pies = undefined
//     }
// })
</script>




<template>
  <div id="payMethodDetails" style="width: 200px;height:300px;"></div>
</template>



